<template>
	<view class="container">
		<!-- 行程信息卡片 -->
		<view class="trip-card">
			<view class="card-content">
				<view class="route-info">
					<view class="route-item">
						<view class="route-dot start-dot"></view>
						<text class="route-text">{{ currentTripDetails.line.start.name || '起点' }}·{{ currentTripDetails.line.start_title || '起点' }}</text>
					</view>
					<view class="route-item" v-if="currentTripDetails.line.approach">
						<view class="route-dot approach-dot"></view>
						<text class="route-text">途径：{{ currentTripDetails.line.approach }}</text>
					</view>
					<view class="route-item">
						<view class="route-dot end-dot"></view>
						<text class="route-text">{{ currentTripDetails.line.end.name || '终点' }}·{{ currentTripDetails.line.end_title || '终点' }}</text>
					</view>
				</view>

				<view class="trip-details">
					<view class="detail-item">
						<image src="/static/home/time-icon.png" class="detail-icon"></image>
						<text class="detail-label">时间</text>
						<text class="detail-text">{{ currentTripDetails.line.start_time || '未设置' }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-icon-text">¥</text>
						<text class="detail-label">价格</text>
						<text class="detail-text">{{ currentTripDetails.line.unit_price || '0' }}</text>
					</view>
					<view class="detail-item">
						<image src="/static/home/car.png" class="detail-icon"></image>
						<text class="detail-label">订座/余座</text>
						<text class="detail-text">{{ currentTripDetails.line.on_order || 0 }}人/{{ currentTripDetails.line.current_seats || 0 }}人</text>
					</view>
					<view class="detail-item" v-if="currentTripDetails.line.car">
						<image src="/static/personalCenter/car.png" class="detail-icon"></image>
						<text class="detail-label">车辆</text>
						<text class="detail-text">
							{{ currentTripDetails.line.car.brand_model }} {{ currentTripDetails.line.car.car_number }} {{ currentTripDetails.line.car.seats }}座
						</text>
					</view>
					<view class="detail-item" v-if="currentTripDetails.line.remark">
						<image src="/static/home/remark-icon.png" class="detail-icon"></image>
						<text class="detail-label">备注</text>
						<text class="detail-text">{{ currentTripDetails.line.remark }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 乘客信息 -->
		<view class="passenger-info">
			<view class="passenger-num-info">乘客信息({{ currentTripDetails.lineOrders.length }}人)</view>
			<view class="passenger-item" v-for="(info, index) in currentTripDetails.lineOrders" :key="index">
				<view class="passenger-info-row">
					<!-- <text>{{ info.user.nickname }}</text> -->
					<text>{{ info.phone }}</text>
					<text>{{ info.seats }}座</text>
				</view>
				<view class="passenger-info-col">
					<text class="passenger-label">上车点：</text>
					<text class="passenger-value">{{ info.boarding_location }}</text>
				</view>

				<!-- 乘客价格信息———— 订单状态完成时展示 -->
				<view class="price-details" v-if="isShowMoreInfo">
					<view class="price-row">
						<text class="price-label">订座总额</text>
						<text class="price-value">¥{{ info.amount }}</text>
					</view>
					<view class="divider"></view>
					<view class="price-row">
						<text class="price-label">优惠券</text>
						<text class="price-value">-¥{{ info.coupon_amount }}</text>
					</view>
					<view class="divider"></view>
					<view class="price-row">
						<text class="price-label">乘客需支付总额</text>
						<text class="price-value">¥{{ info.payment_amount }}</text>
					</view>
				</view>
				<!-- 订单状态完成时展示 -->
				<view v-if="currentTripDetails.line.status == 1" class="more-passenger-info" @click="showMoreInfo">
					<text>{{ isShowMoreInfo ? '收起' : '展开' }}</text>
					<image v-if="isShowMoreInfo" src="/static/personalCenter/collapse.png" class="arrow-more-icon"></image>
					<image v-if="!isShowMoreInfo" src="/static/personalCenter/unfold.png" class="arrow-more-icon"></image>
				</view>
			</view>
			<view class="divider" v-if="!currentTripDetails.lineOrders[currentTripDetails.lineOrders.length - 1]"></view>
		</view>
		<!-- 信息费相关 有人订座展示-->
		<view class="price-details info-fees-warps" v-if="true">
			<view class="price-row">
				<text class="price-label">应付信息费</text>
				<text class="price-value">
					<!-- <text class="before-price">￥{{ currentTripDetails.line.service_fee }}</text> -->
					￥{{ currentTripDetails.line.service_fee }}
				</text>
			</view>
			<view class="divider"></view>
			<view class="price-row">
				<text class="price-label">信息费抵扣额</text>
				<text class="price-value">￥{{ currentTripDetails.line.deduction_amount }}</text>
			</view>
			<view class="divider"></view>
			<view class="price-row" @click="show = true">
				<text class="price-label">优惠券</text>
				<text class="price-value" v-if="!yhqItem.amount">￥0</text>
				<text class="price-value price-color-value" v-else>-￥{{ yhqItem.amount }}</text>
			</view>
			<view class="divider"></view>
			<view class="price-row">
				<text class="price-label">实付信息费</text>
				<text class="price-value price-color-value">
					￥{{ yhqItem.amount ? (Number(currentTripDetails.line.actual_service_fee) - Number(yhqItem.amount)).toFixed(2) : currentTripDetails.line.actual_service_fee }}
				</text>
			</view>

			<!-- <view class="price-row">
                <text class="price-label">实际需收总额</text>
                <text class="price-value price-color-value">+￥{{ currentTripDetails.line.income }}</text>
            </view> -->

			<!-- pay_status信息费支付状态：0-待支付，1-支付中，2-支付成功，3-支付失败 -->
			<view class="pay-info-fees" v-if="isShowServiceFeePay" @click="toPayServiceFees">支付信息费</view>
		</view>
		<!-- 评价信息 -->
		<view class="evaluate-section" v-if="false">
			<view class="evaluate-title">
				<text>我的评价</text>
				<image class="evaluate-icon" src="/static/personalCenter/zan.png" mode="aspectFill"></image>
			</view>
			<view class="evaluate-info">
				<text>车主非常按时，全程态度很好！</text>
			</view>
		</view>
		<!-- 投诉信息 -->
		<view class="evaluate-section" v-if="currentTripDetails.complaints.length > 0" v-for="(item, index) in currentTripDetails.complaints" :key="index">
			<view class="evaluate-title">
				<text>我的投诉</text>
				<text class="evaluate-time">{{ item.created_at }}</text>
			</view>
			<view class="evaluate-info">
				<text>{{ item.content }}</text>
			</view>
		</view>
		<!-- 退订原因信息 -->
		<view class="evaluate-section" v-if="false">
			<view class="evaluate-title">
				<text>退订原因-我的原因</text>
			</view>
			<view class="evaluate-info">
				<text>行程临时有变</text>
			</view>
		</view>
		<!-- 行程已完成 操作按钮 -->
		<view class="action-buttons" v-if="currentTripDetails.line.status != 0">
			<view class="action-btn share" @click="navigateTo('/pages/personalCenter/trip/owners/tripComplain?id=' + currentTripDetails.line.id)">我要投诉</view>
			<view class="action-btn cancel" @click="handlePublishTrip">再次发布行程</view>
		</view>
		<!-- 行程进行中 操作按钮 -->
		<view v-if="currentTripDetails.line.status == 0" class="action-buttons-warp" style="display: flex; justify-content: space-between">
			<view class="action-buttons" style="width: 50%" @click="handleUpdateTrip">
				<view class="action-btn publish" v-if="true">修改行程</view>
			</view>
			<view class="action-buttons" style="width: 50%" @click="handleTakeOffTrip">
				<view class="action-btn publish" v-if="true">下架行程</view>
			</view>
		</view>
		<!-- 温馨提示 -->
		<!-- 行程进行中展示 -->
		<view class="tips-section" v-if="currentTripDetails.line.status == 0">
			<view class="tips-text">温馨提示：</view>
			<view class="tips-text">请在乘客上车后向乘客收取座位费，本平台不代收费用</view>
		</view>
		<!-- 行程其他状态展示-->
		<view class="tips-section" v-if="currentTripDetails.line.status != 0">
			<view class="tips-text">温馨提示：</view>
			<view class="tips-text">1.请在乘客上车后向乘客收取座位费，本平台不代收费</view>
			<view class="tips-text">2.乘客使用优惠券金额在车主完成本行程后将自动进入信息费抵扣额</view>
			<view class="tips-text">3.平台将按照车主实际需收总额1</view>
		</view>
		<!-- 位置聊天 -->
		<view
			v-if="currentTripDetails.line.status == 0"
			class="chat-center"
			@touchstart.stop.prevent="onTouchStart"
			@touchmove.stop.prevent="onTouchMove"
			@touchend.stop.prevent="onTouchEnd"
			:style="{ transform: `translateY(${bottom}px)` }"
		>
			<image class="chat-cion" src="/static/personalCenter/chat-icon.png" @click="handleChat"></image>
		</view>

		<chooseCouponsPopupVue2 :showCouponsPopup="show" @update:visible="onVisible" :value="currentTripDetails.line.actual_service_fee"></chooseCouponsPopupVue2>
	</view>
</template>

<script>
import { formatDateTime } from '@/utils/dateTimeFormatter.js';
import chooseCouponsPopupVue2 from '../../../common/chooseCouponsPopup2.vue';
export default {
	components: {
		chooseCouponsPopupVue2
	},
	data() {
		return {
			statusText: {
				0: '进行中',
				1: '已完成',
				2: '已下架'
			},

			statusBg: {
				0: '#4E84FF',
				1: '#00CFAB',
				2: '#AFB5BE'
			},
			isShowMoreInfo: false,
			currentTripId: null,
			currentTripDetails: {},
			lineOrdersArr: [],
			show: false,
			yhqItem: {},
			bottom: 0,
			time: null,
			isDragging: false,
			startX: 0,
			startY: 0
		};
	},
	computed: {
		// 是否显示支付信息费 status
		isShowServiceFeePay() {
			if (
				(this.currentTripDetails.line.status == 1 || this.currentTripDetails.line.status == 2) &&
				Number(this.currentTripDetails.line.service_fee) > 0 &&
				(this.currentTripDetails.line.pay_status == 0 || this.currentTripDetails.line.pay_status == 3 || this.currentTripDetails.line.pay_status == 1)
			) {
				return true;
			}
			return false;
		},
		getColor() {
			if (this.currentTripDetails.line.status == 2) {
				return '#0B1F20';
			}
			return '#FF7937';
		}
	},
	onShow() {
		this.currentTripId = uni.getStorageSync('currentTripId');
		if (this.currentTripId) {
			this.getMotoristsTripDetails();
		}
	},
	onLoad(options) {
		this.currentTripId = options.id;
		uni.setStorageSync('currentTripId', this.currentTripId);
		this.getMotoristsTripDetails();
	},
	methods: {
		onTouchEnd() {
			const time = new Date().getTime();

			if (time - this.time < 500) this.handleChat();

			this.isDragging = false;
		},
		onTouchStart(event) {
			// 记录初始触摸点位置等信息
			const touch = event.touches[0];
			this.startX = touch.pageX;
			this.startY = touch.pageY;
			this.isDragging = true;

			this.oB = this.bottom;

			console.log(this.oB);

			this.time = new Date().getTime();
		},
		onTouchMove(event) {
			if (this.isDragging) {
				// 阻止页面滚动
				event.preventDefault();

				// 计算移动距离
				const touch = event.touches[0];
				const offsetX = touch.pageX - this.startX;
				const offsetY = touch.pageY - this.startY;
				// 移动元素

				this.bottom = this.oB + offsetY;
			}
		},
		onVisible(show, item) {
			console.log(show, item, '********');
			this.show = show;
			this.yhqItem = item ? item : {};
		},
		handleChat() {
			uni.setStorageSync('lineOrdersArr', this.lineOrdersArr);
			uni.setStorageSync('lineOrders', this.currentTripDetails.lineOrders);
			uni.navigateTo({
				url: '/pages/personalCenter/trip/locationChat?lid=' + this.currentTripDetails.line.id + '&type=' + 'owner'
			});
		},
		async getMotoristsTripDetails() {
			try {
				const res = await this.$http.get(`/h5/user/line/detail/${this.currentTripId}`);
				this.currentTripDetails = res.data || {};
				this.currentTripDetails.line.start_time = formatDateTime(this.currentTripDetails.line.start_time);
				this.lineOrdersArr =
					res.data.lineOrders &&
					res.data.lineOrders.map((item) => {
						return {
							uid: item.uid,
							phone: item.phone.slice(-4)
						};
					});
			} catch (error) {}
		},
		//
		isWechat() {
			const ua = navigator.userAgent.toLowerCase();
			return ua.indexOf('micromessenger') !== -1;
		},
		// 支付信息费用
		async toPayServiceFees() {
			try {
				const data = {};
				if (this.yhqItem.id) {
					data.owner_coupon_id = this.yhqItem.id;
				}
				const res = await this.$http.post(`/h5/user/line/serviceFeePay/${this.currentTripId}`, data);
				// 唤起微信支付
				try {
					const isBoolean = typeof res.data === 'boolean';
					if (isBoolean) {
						if (res.data) {
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 5000
							});
						} else {
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 5000
							});
						}
						this.getMotoristsTripDetails();
						return;
					}
					if (this.isWechat()) {
						// 微信环境，使用JSAPI支付
						await this.wechatH5Pay(res.data);
					} else {
						// 其他环境（App、小程序等）
						uni.showToast({
							title: '当前环境不支持微信支付',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showModal({
						title: '提示',
						content: error,
						showCancel: false
					});
				}
			} catch (error) {}
		},
		// 微信H5支付
		wechatH5Pay(payParams) {
			uni.showLoading({
				mask: true
			});
			return new Promise((resolve, reject) => {
				// 微信环境，调用JSAPI支付
				const self = this;
				if (typeof WeixinJSBridge === 'undefined') {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
						document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
					}
				} else {
					onBridgeReady();
				}

				function onBridgeReady() {
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest',
						{
							appId: payParams.appId,
							timeStamp: payParams.timeStamp,
							nonceStr: payParams.nonceStr,
							package: payParams.package,
							signType: payParams.signType,
							paySign: payParams.paySign
						},
						function (res) {
							uni.hideLoading();
							if (res.err_msg === 'get_brand_wcpay_request:ok') {
								resolve('支付成功');
							} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
								// 支付取消 支付状态变成待支付
								self.cancelPayServiceFees();
								reject('支付取消');
							} else {
								reject('支付失败');
							}
						}
					);
				}
			});
		},
		// 支付取消 支付状态变成待支付
		async cancelPayServiceFees() {
			try {
				const res = await this.$http.get(`/h5/user/line/cancelServiceFeePay/${this.currentTripId}`);
				this.getMotoristsTripDetails();
			} catch (error) {}
		},
		showMoreInfo() {
			this.isShowMoreInfo = !this.isShowMoreInfo;
		},
		handlePublishTrip() {
			uni.switchTab({
				url: '/pages/released/index'
			});
		},
		// 下架行程
		async handleTakeOffTrip() {
			if (this.currentTripDetails.line.on_order > 0) {
				uni.showModal({
					title: '提示',
					content: '行程已有预订记录，强行下架依然会产生信息费。',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.confirmTakeOffTrip();
						}
					}
				});
				return;
			}
			// 弹窗确认
			uni.showModal({
				title: '提示',
				content: '确定下架该行程吗？',
				success: (res) => {
					if (res.confirm) {
						this.confirmTakeOffTrip();
					}
				}
			});
		},
		// 下架行程
		async confirmTakeOffTrip() {
			try {
				const res = await this.$http.get(`/h5/user/line/cancel/${this.currentTripId}`);
				uni.showToast({
					title: '下架成功',
					icon: 'success'
				});
				this.getMotoristsTripDetails();
			} catch (error) {}
		},
		// 修改行程
		handleUpdateTrip() {
			// 弹窗确认
			uni.showModal({
				title: '提示',
				content: '确定修改该行程吗？',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/personalCenter/trip/owners/reviseTrip?id=' + this.currentTripId
						});
					}
				}
			});
		},
		// 导航到指定页面
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style scoped>
/* 行程信息卡片样式 */
.trip-card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx 20rpx;
	margin: 20rpx 26rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	position: relative;
}

.card-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.route-info {
	margin-bottom: 20rpx;
}

.route-item {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.route-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	margin-right: 15rpx;
}

.start-dot {
	background-color: #ff3f39;
}

.end-dot {
	background-color: #00cfab;
}

.approach-dot {
	background-color: #ffa500;
}

.route-text {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
}

.trip-details {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
	margin-top: 0;
	padding-top: 15rpx;
	border-top: 1rpx solid #f0f0f0;
}

.detail-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.detail-icon {
	width: 24rpx;
	height: 24rpx;
	filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(330deg) brightness(118%) contrast(101%);
}

.detail-icon-text {
	font-size: 24rpx;
	color: #ff7937;
	width: 24rpx;
	text-align: center;
}

.detail-label {
	font-size: 24rpx;
	color: #999999;
	margin-right: 8rpx;
}

.detail-text {
	font-size: 26rpx;
	color: #333333;
}

/* 乘客信息样式 */
.passenger-info {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 0rpx 20rpx 0rpx 20rpx;
	margin: 20rpx 26rpx;
}

.passenger-num-info {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 34rpx;
	color: #0b1f20;
	padding-top: 56rpx;
	padding-bottom: 20rpx;
}

.passenger-item {
	padding-top: 34rpx;
	padding-bottom: 34rpx;
	position: relative;
}

.passenger-info-row {
	display: flex;
	justify-content: space-between;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 32rpx;
	color: #0b1f20;
	line-height: 28rpx;
}

.passenger-info-col {
	padding-top: 26rpx;
}

.passenger-label {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #999999;
}

.passenger-value {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #666666;
}

.more-passenger-info {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 16rpx;
}

.more-passenger-info text {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 30rpx;
	color: #ff7937;
	line-height: 54rpx;
	letter-spacing: 1px;
}

.more-passenger-info .arrow-more-icon {
	width: 32rpx;
	height: 32rpx;
}

.divider {
	height: 2rpx;
	background-color: #eee;
}

/* 评价样式 */
.evaluate-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 36rpx 20rpx 50rpx 20rpx;
	margin: 20rpx 26rpx;
}

.evaluate-title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #666666;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
}

.evaluate-time {
	color: #999999;
}

.evaluate-icon {
	width: 40rpx;
	height: 40rpx;
}

.evaluate-info {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 30rpx;
	color: #0b1f20;
	line-height: 48rpx;
}

/* 乘客价格信息样式 */
.info-fees-warps {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 0rpx 20rpx 0rpx 20rpx;
	margin: 20rpx 26rpx;
}

.price-row {
	display: flex;
	justify-content: space-between;
	padding-top: 34rpx;
	padding-bottom: 34rpx;
}

.price-label {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #0b1f20;
}

.price-value {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #0b1f20;
	line-height: 28rpx;
}

.price-color-value {
	color: #ff7937;
}

.before-price {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 32rpx;
	color: #666666;
	line-height: 28rpx;
	text-decoration-line: line-through;
}

.pay-info-fees {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 32rpx;
	color: #ff7937;
	line-height: 48rpx;
	padding: 26rpx 0;
	text-align: center;
}

/* 操作按钮样式 */
.action-buttons {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 26rpx;
}

.action-btn {
	flex: 1;
	text-align: center;
	padding: 26rpx 0;
	border-radius: 16rpx;
}

.share {
	background-color: #fff;
	color: #666666;
}

.cancel {
	background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
	color: #fff;
	margin-left: 20rpx;
}

.publish {
	background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
	color: #fff;
}

.share-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 16rpx;
}

/* 温馨提示样式 */
.tips-section {
	padding: 20rpx 64rpx;
}

.tips-text {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	line-height: 48rpx;
}

/* 位置聊天样式 */
.chat-center .chat-cion {
	width: 128rpx;
	height: 128rpx;
	position: fixed;
	right: 0;
	bottom: 540rpx;
}
</style>
